<style type="text/css">
	.spectable td,.spectable th {border:1px solid #ccc; vertical-align: middle;text-align:center;}
	.spectable th { font-weight: bold;}
	.spectableinput { text-align: center;}
	.f {border-color: #b94a48;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
	.table.table-bordered tr th,.table.table-bordered tr td{overflow:hidden; text-overflow:ellipsis;}
	.input-group-addon .radio-inline, .input-group-addon .checkbox-inline{padding-top:0; line-height:0.95;}
	.border-line{ height:1px; border-bottom:1px solid #ddd;}
	.alert-new{ padding-left:0;padding-right:0;}
</style>
<div class="form-group">
    <label class="col-xs-12 col-sm-3 col-md-2 col-lg-2 control-label">启用活动规格</label>
	<div class="col-sm-9 col-xs-12">
        <label class="checkbox-inline">
            <input type="checkbox" id="hasoption" value="1" name="activity[hasoption]" {if $activity['hasoption']==1}checked{/if}><span style="color: #737373;">启用活动规格后，活动的报名费用及名额以活动规格为准，名额设置为0则无限制</span>
        </label>
	</div>
</div>
<div id='tboption' style="{if $activity['hasoption']!=1}display:none{/if}">
	<div class="alert alert-info">
    	1. 拖动规格可调整规格显示顺序，更改规格及规格项后请点击下方的【<font color="#FF0000">刷新规格活动表</font>】来更新数据。<br/>
		2. 每一种规格名代表不同类型，例如“门票类型”为一种规格，此规格可添加多个规格项，如：单人票、双人票；如果设置多规格，移动端必须每一种规格都选择一个规格项，才能报名。<br/>
	</div>
	<div id='specs'>
		{loop $activitySpec[0] $spec}
		{php include fx_template('activity/spec');}
		{/loop}
	</div>
    <table class="table">
		<tr>
			<td style="border:none;">
				<a href="javascript:;" class='btn btn-primary' id='add-spec' onclick="addSpec()" style="margin-top:10px;margin-bottom:10px;"title="添加规格"><i class='fa fa-plus'></i> 添加规格</a> 
				<a href="javascript:;" onclick="calc()" title="刷新规格活动表" class="btn btn-primary"><i class="fa fa-refresh"></i> 刷新规格活动表</a>
			</td>
		</tr>
	</table>
	<div class="panel-body table-responsive" id="options" style="padding:0;">
		{$activitySpec[1]}
	</div>
</div>
<link href="{FX_URL}web/resource/css/style.min.css" rel="stylesheet">
<script language="javascript">
	require(['jquery.ui'], function ($){
		$('#specs').sortable({
			opacity:0.25,
			stop: function(){
				window.optionchanged = true;
			}
		});
		
		$('.spec_item_items').sortable(
			{
				handle:'.fa-arrows',
				stop: function(){
					window.optionchanged = true;
				}
			}
		);
	});
	
	$(function(){
		$("#hasoption").click(function(){
			var obj = $(this);
			if (obj.get(0).checked){
				$("#tboption").show();
			}else{
				$("#tboption").hide();
			}
		});
	})
	function addSpec(){
	$("#add-spec").html("正在处理...").attr("disabled", "true").toggleClass("btn-primary");
		var url = "{php echo web_url('activity/option/spec')}";
		$.ajax({
			"url": url,
			success:function(data){
				$("#add-spec").html('<i class="fa fa-plus"></i> 添加表单').removeAttr("disabled").toggleClass("btn-primary"); ;
				$('#specs').append(data);
				var len = $(".add-specitem").length -1;
				$(".add-specitem:eq(" +len+ ")").focus();
				window.optionchanged = true;
			}
		});
	}
	function removeSpec(specid){
		if (confirm('确认要删除此表单?')){
			$("#spec_" + specid).remove();
			window.optionchanged = true;
		}
	}
	function addSpecItem(specid){
	$("#add-specitem-" + specid).html("正在处理...").attr("disabled", "true");
		var url = "{php echo web_url('activity/option/specitem')}" + "&specid=" + specid;
		$.ajax({
			"url": url,
			success:function(data){
				$("#add-specitem-" + specid).html('<i class="fa fa-plus"></i> 添加').removeAttr("disabled");
				$('#spec_item_' + specid).append(data);
				var len = $("#spec_" + specid + " .spec_item_title").length -1;
				$("#spec_" + specid + " .spec_item_title:eq(" +len+ ")").focus();
				window.optionchanged = true;
			}
		});
	}
	function removeSpecItem(obj){
		$(obj).parent().parent().parent().remove();
	}
	function calc(){

	window.optionchanged = false;
	var html = '<table class="table table-bordered table-condensed"><thead><tr class="active">';
	var specs = [];
	$(".spec_item").each(function(i){
		var _this = $(this);

		var spec = {
			id: _this.find(".spec_id").val(),
			title: _this.find(".spec_title").val()
		};
	
		var items = [];
		_this.find(".spec_item_item").each(function(){
			var __this = $(this);
			var item = {
				id: __this.find(".spec_item_id").val(),
				title: __this.find(".spec_item_title").val(),
				show:__this.find(".spec_item_show").get(0).checked?"1":"0"
			}
			items.push(item);
		});
		spec.items = items;
		specs.push(spec);
	});
	specs.sort(function(x,y){
		if (x.items.length > y.items.length){
			return 1;
		}
		if (x.items.length < y.items.length) {
			return -1;
		}
	});

	var len = specs.length;
	var newlen = 1; //多少种组合
	var h = new Array(len); //显示表格二维数组
	var rowspans = new Array(len); //每个列的rowspan
	for(var i=0;i<len;i++){
		//表头
		html+="<th style='width:80px;'>" + specs[i].title + "</th>";
		
		//计算多种组合
		var itemlen = specs[i].items.length;
		if(itemlen<=0) { itemlen = 1 };
		newlen*=itemlen;
		
		//初始化 二维数组
		h[i] = new Array(newlen);
		for(var j=0;j<newlen;j++){
			h[i][j] = new Array();
		}
		//计算rowspan
		var l = specs[i].items.length;
		rowspans[i] = 1;
		for(j=i+1;j<len;j++){
			rowspans[i]*= specs[j].items.length;
		}
	}

	html += '<th class="info" style="width:130px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">库存</div><div class="input-group"><input type="text" class="form-control option_quota_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_quota\');"></a></span></div></div></th>';
	{if $_W['allow']['activity']['falseinfo'] || !$_W['allow']}
	html += '<th class="success" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">虚拟报名</div><div class="input-group"><input type="text" class="form-control option_falsenum_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_falsenum\');"></a></span></div></div></th>';
	{/if}
	html+='<th class="warning" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">单价</div><div class="input-group"><input type="text" class="form-control option_aprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_aprice\');"></a></span></div></div></th>';
	//html+='<th class="danger" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">市场价格</div><div class="input-group"><input type="text" class="form-control option_costprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_costprice\');"></a></span></div></div></th>';
	html+='</tr></thead>';
	
	for(var m=0;m<len;m++){
		var k = 0,kid = 0,n=0;
		for(var j=0;j<newlen;j++){
			var rowspan = rowspans[m]; //9
			if( j % rowspan==0){
				h[m][j]={title: specs[m].items[kid].title, html: "<td rowspan='" +rowspan + "'>"+ specs[m].items[kid].title+"</td>\r\n",id: specs[m].items[kid].id};
			//	k++; if(k>specs[m].items.length-1) { k=0; }
			}
			else{
				h[m][j]={title:specs[m].items[kid].title, html: "",id: specs[m].items[kid].id};	
			}
			n++;
			if(n==rowspan){
			kid++; if(kid>specs[m].items.length-1) { kid=0; }
			n=0;
			}
		}
	}

	var hh = "";
	for(var i=0;i<newlen;i++){
		hh+="<tr>";
		var ids = [];
		var titles = [];
		for(var j=0;j<len;j++){
			hh+=h[j][i].html; //每一行的每个表单项列
			ids.push( h[j][i].id);
			titles.push( h[j][i].title);
		}
		ids =ids.join('_');
		titles= titles.join('+');
	
		var val ={ id : "",title:titles, quota : "",costprice : "",aprice : "",falsenum : ""};
		if( $(".option_id_" + ids).length>0){
			val ={
				id : $(".option_id_" + ids+":eq(0)").val(),
				title: titles,
				quota : $(".option_quota_" + ids+":eq(0)").val(),
				costprice : $(".option_costprice_" + ids+":eq(0)").val(),
				aprice : $(".option_aprice_" + ids+":eq(0)").val(),
				falsenum : $(".option_falsenum_" + ids +":eq(0)").val(),
			}
		}
		hh += '<td class="info">'
		hh += '<input name="option_quota_' + ids +'[]"type="text" class="form-control option_quota option_quota_' + ids +'" value="' +(val.quota=='undefined'?'':val.quota)+'"/>';
		hh += '<input name="option_id_' + ids+'[]"type="hidden" class="form-control option_id option_id_' + ids +'" value="' +(val.id=='undefined'?'':val.id)+'"/>';
		hh += '<input name="option_ids[]"type="hidden" class="form-control option_ids option_ids_' + ids +'" value="' + ids +'"/>';
		hh += '<input name="option_title_' + ids +'[]"type="hidden" class="form-control option_title option_title_' + ids +'" value="' +(val.title=='undefined'?'':val.title)+'"/>';	
		hh += '</td>';
		{if $_W['allow']['activity']['falseinfo'] || !$_W['allow']}
		hh += '<td class="success"><input name="option_falsenum_' + ids+'[]" type="text" class="form-control option_falsenum option_falsenum_' + ids +'" value="' +(val.falsenum=='undefined'?'':val.falsenum)+'"/></td>';
		{/if}
		hh += '<td class="warning"><input name="option_aprice_' + ids+'[]" type="text" class="form-control option_aprice option_aprice_' + ids +'" " value="' +(val.aprice=='undefined'?'':val.aprice)+'"/></td>';
		//hh += '<td class="danger"><input name="option_costprice_' +ids+'[]" type="text" class="form-control option_costprice option_costprice_' + ids +'" " value="' +(val.costprice=='undefined'?'':val.costprice)+'"/></td>';
		hh += "</tr>";
	}
	html+=hh;
	html+="</table>";
	if (len){
		$("#options").html(html);
	}else{
		$("#options").html('');
	}
}
function setCol(cls){
	$("."+cls).val( $("."+cls+"_all").val());
}
function displaytypeSpec(obj){
	var displaytype = $(obj).val();
	$(obj).parents('.displaytype').find('input').first().val(displaytype);
}
function essentialSpec(obj){
	var essential = $(obj).get(0).checked?"1":"0";
	$(obj).parent('label').find('input').next().val(essential);
}
function showItem(obj){
	var show = $(obj).get(0).checked?"1":"0";
	$(obj).parent('label').find('input').next().val(show);
}
function nofind(){
	var img=event.srcElement;
	img.src="./resource/image/module-nopic-small.jpg";
	img.onerror=null; 
}
</script>